<template>
	<view class="user-container">
		<image v-if="user_info" class="card-bg" :src="user_info.avatar" mode="aspectFill" />
		<view class="user-card" v-if="user_info">
			<image class="avatar" @click="toggle_avatar" :src="user_info.avatar"
				mode="aspectFill" />
			<view class="user-name">{{user_info.author_name}}</view>
			<view class="user-info">
				<view>
					<view>
						被关注
					</view>
					<text>{{user_info.follow_count}}</text>
				</view>
				<view>
					<view>
						粉丝
					</view>
					<text>{{user_info.fans_count}}</text>
				</view>
				<view>
					<view>
						积分
					</view>
					<text>{{user_info.integral_count}}</text>
				</view>
			</view>
		</view>
		<view class="list-item" @click="to_login" v-else>
			<image src="/static/img/logo.jpeg" mode="aspectFill" />
			<text>您尚未登录，请点击登录</text>
			<uni-icons type="right" size="18" color="#6c757d" />
		</view>
		<view class="list-item" @click="to_my_article">
			<view>
				<uni-icons type="contact" size="20" />
				<text>我的文章</text>
			</view>
			<uni-icons type="right" size="18" color="#6c757d" />
		</view>
		<view class="list-item" @click="to_opinion">
			<view>
				<uni-icons type="help" size="20" />
				<text>意见反馈</text>
			</view>
			<uni-icons type="right" size="18" color="#6c757d" />
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="list-item" @click="get_new_version">
			<view>
				<uni-icons type="paperclip" size="20" />
				<text>当前版本</text>
				<text style="color: #f40;">(点击获取新版本)</text>
			</view>
			<view>
				0.0.1
				<uni-icons type="right" size="18" color="#6c757d" />
			</view>
		</view>
		<!-- #endif -->
		<view v-if="user_info" class="quit-btn" size="mini" @click="quit">退出</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			async toggle_avatar() {
				const image = await uni.chooseImage({
					count: 1
				})
				if (image[0]) { // 是否有错误
					console.error(image[0]);
					return;
				}
				
				const res = await uniCloud.uploadFile({
					cloudPath: image[1].tempFiles[0].name,
					filePath: image[1].tempFiles[0].path
				})
				const {
					msg,
					user_info
				} = await this.$http.change_avatar({
					user_id: this.user_info._id,
					avatar: res.fileID
				})
				uni.showToast({
					title: msg,
				});
				this.$store.commit('set_user_info', user_info)
			},
			quit() {
				this.$store.commit('set_user_info', null)
			},
			to_login() {
				uni.navigateTo({
					url: '/pages/auth/login/login'
				})
			},
			to_my_article() {
				uni.navigateTo({
					url: '/pages/my_article/my_article'
				})
			},
			to_opinion() {
				uni.navigateTo({
					url: '/pages/opinion/opinion'
				})
			},
			get_new_version() {
				console.log('正在下载新版本……');
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.user-container {
		position: relative;

		.card-bg {
			width: 100%;
			height: 400rpx;
			overflow: hidden;
			position: absolute;
			left: 0;
			top: 0;
			filter: blur(16rpx);
			opacity: .7;
		}

		.user-card {
			height: 400rpx;
			background-image: filter;
			text-align: center;
			margin-bottom: 20rpx;

			.avatar {
				margin-top: 50rpx;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}

			.user-name {
				margin: 20rpx 0;
				font-weight: bold;
			}

			.user-info {
				padding: 0 50rpx;
				@include flex();
				font-size: 30rpx;

				text {
					color: $secondary;
				}
			}
		}

		.list-item {
			padding: 20rpx;
			@include flex();
			margin-bottom: 20rpx;
			background-color: #fff;
			color: $secondary;
			font-size: 28rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			view text {
				margin-left: 10rpx;
				vertical-align: top;
			}
		}

		.quit-btn {
			background-color: $danger;
			color: #fff;
			border-radius: 10rpx;
			margin: 50rpx auto 0;
			text-align: center;
			width: 300rpx;
			padding: 20rpx 0;
		}
	}
</style>
